<!-- 商品清单 -->
<template>
  <div class="container">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="商品清单" name="1">
        <van-card
          v-for="item in myShopList"
          :key="item.id"
          :num="item.num"
          :price="`${item.num * item.selling_price}`"
          :desc="`商品型号：${item.goods_spec}`"
          :title="item.goods_title"
          :thumb="item.goods_logo"
        />
        <van-field v-model="contractNum" label="客户合同号" placeholder="可选填贵公司系统对应的合同号" @blur="blur1" />
        <van-field v-model="Remarks" label="添加备注" placeholder="限制字数在60个以内" input maxlength="60"   show-word-limit  @blur="blur2"/>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
export default {
  name: "DetailedList",
  data() {
    return {
      activeNames: ["1"],
      contractNum: "", // 合同号
      Remarks: "" // 备注
      
    };
  },
  methods: {
    blur1(event) {
      console.log(event.target.value)
      this.contractNum = event.target.value
      this.$emit("formChanges", this.contractNum,this.Remarks);
    },
    blur2(event){
      this.Remarks = event.target.value
       this.$emit("formChanges", this.contractNum,this.Remarks);
    },
  },
  computed: {
    myShopList() {
      return this.$store.state.SettlementData;
    }
  },
 
};
</script>
<style lang="scss" scoped>
</style>